<script setup lang="ts">
// AI助手卡片组件
</script>

<template>
  <div class="ai-assistant-card">
    <h2 class="card-title">为现代软件团队提供人工智能助手</h2>
    <p class="card-description">
      利用智能代理提升开发团队工作效率，利用 AI 简化测试、调试和项目管理。
    </p>
    <button class="start-button">
      开始使用智能助手 →
    </button>
  </div>
</template>

<style scoped>
.ai-assistant-card {
  flex: 1;
  background-color: #fff;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

.card-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
  color: #333;
}

.card-description {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.start-button {
  background-color: #4a6cf7;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.8rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-top: auto;
  align-self: flex-start;
}

.start-button:hover {
  background-color: #3a5ce5;
}
</style> 